<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.test{
				width: 100px;
				height: 100px;
				background: skyblue;
				position: absolute;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="test"></div>
		<script type="text/javascript">
			//1、模拟双击事件
			var test = document.querySelector(".test");
			function addDBLclick(el,callback){
				var isclick = false;
				el.addEventListener("click",function(){
					if(isclick==true){
						callback();
						isclick=false;
						clearTimeout(t);
					}else{
						isclick=true;
						var t =setTimeout(function(){
							isclick=false;
						},500)
					}
				})
			}addDBLclick(test,function(){
				console.log(111);
			});
			
			//元素跟随鼠标移动
			test.onmousedown=function(){
				document.onmousemove=function(e){
					test.style.left=e.clientX-50+"px";
					test.style.top=e.clientY-50+"px";
				}
				document.addEventListener("mouseup",function(){
					document.onmousemove=null;
				
				})
			}
		</script>
	</body>
</html>
